<template>
    <div class="page">
      <el-form :inline="true" v-if="searchVisible" class="query-form m-b-10" ref="searchForm" :model="searchForm" @keyup.enter="refreshList()" @submit.prevent>
        <!-- 搜索框-->
        <el-form-item prop="projectName" label="项目名称：">
          <el-input v-model="searchForm.projectName" placeholder="请输入项目名称" clearable></el-input>
        </el-form-item>
        <el-form-item prop="projectType" label="项目类型：">
          <el-select v-model="searchForm.projectType" placeholder="请选择项目类型">
            <el-option v-for="item in $dictUtils.getDictList('project_type')" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="office.id" label="负责部门：">
          <office-select v-model="searchForm.office.id" type="2" />
        </el-form-item>
        <el-form-item prop="groupInternalExternal" label="集团内/外：">
          <el-select v-model="searchForm.groupInternalExternal" placeholder="请选择集团内/外">
            <el-option v-for="item in $dictUtils.getDictList('group_internal_external')" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
  
        <el-form-item>
          <el-button type="primary" @click="refreshList()" icon="search">查询</el-button>
          <el-button type="default" @click="resetSearch()" icon="refresh-right">重置</el-button>
        </el-form-item>
      </el-form>
  
      <div class="jp-table">

        <div class="jp-table-body">
          <vxe-table border auto-resize resizable height="auto" :loading="loading" size="small" ref="projectMainTable" show-header-overflow show-overflow
            highlight-hover-row :menu-config="{}" :print-config="{}" :import-config="{    importMethod: importMethod,    types: ['csv', 'xls', 'xlsx'],    remote: true,  }" :export-config="{    remote: true,    filename: `项目数据${moment(new Date()).format(	'YYYY-MM-DD'    )}`,
      sheetName: '项目数据',
      exportMethod: exportMethod,
      types: ['xlsx'],
      modes: ['current', 'selected', 'all'],
    }" @sort-change="sortChangeHandle" :sort-config="{remote:true}" :data="dataList" :checkbox-config="{}" >
            <vxe-column type="seq" width="40"></vxe-column>
            <vxe-column type="checkbox" width="40px"></vxe-column>    
            <vxe-column field="projectName" sortable title="项目名称" width="400px"> 
            </vxe-column>
  
            <vxe-column field="projectSource" sortable title="项目来源">
              <template #default="{ row }">
                {{ $dictUtils.getDictLabel("project_source", row.projectSource, '-') }}
              </template>
            </vxe-column>
            <vxe-column field="correspondent.companyName" sortable title="委托方" >
              <template #default="{ row }">
                {{row.correspondent && row.correspondent.companyName}}
              </template>
            </vxe-column>
            <vxe-column field="projectType" sortable title="项目类型">
              <template #default="{ row }">
                {{ $dictUtils.getDictLabel("project_type", row.projectType, '-') }}
              </template>
            </vxe-column>
  
            <vxe-column field="groupInternalExternal" sortable title="集团内/外">
              <template #default="{ row }">
                {{ $dictUtils.getDictLabel("group_internal_external", row.groupInternalExternal, '-') }}
              </template>
            </vxe-column>
            <!-- <vxe-column field="contractSignTime" sortable title="合同签订时间">
            </vxe-column>
            <vxe-column field="contractAmount" sortable title="合同价(元)">
            </vxe-column> -->
            <!-- <vxe-column field="office.name" sortable title="管理部门">
              <template #default="{ row }">
                {{row.office && row.office.name}}
              </template>
            </vxe-column>
            <vxe-column field="projectStatus" sortable title="项目状态">
              <template #default="{ row }">
                <el-tag :type="row.projectStatus==1?'primary':row.projectStatus==2?'danger':row.projectStatus==1?'warning':'success'">{{ $dictUtils.getDictLabel("project_status", row.projectStatus, '-') }}</el-tag>
                
              </template>
            </vxe-column> -->
            <vxe-column fixed="right" align="center" width="240" title="操作">
              <template #default="{ row }">
                <el-button v-if="hasPermission('project:projectMain:view')" type="primary" text  @click.stop="bindExprot(row.id)">下载</el-button>
              </template>
            </vxe-column>
          </vxe-table>
          <vxe-pager background size="small" :current-page="tablePage.currentPage" :page-size="tablePage.pageSize" :total="tablePage.total"
            :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
            @page-change="currentChangeHandle">
          </vxe-pager>
        </div>
      </div>

    </div>
  </template>
  
  <script>
  import projectMainService from '@/api/project/projectMainService'
  import OfficeSelect from '@/components/officeSelect'
  import projectCostService from '@/api/cost/projectCostService'
  export default {
    data() {
      return {
        searchVisible: true,
        searchForm: {
          projectNo: '',
          projectName: '',
          projectType: '',
          groupInternalExternal: '',
          office: {
            id: ''
          }
        },
        dataList: [],
        tablePage: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          orders: [{ column: "a.create_time", asc: false }],
        },
        loading: false,
        projectId: '',
        basisType:''
      }
    },
  
    components: {
      OfficeSelect,
    },
    created() {
    },
    mounted() {
      this.$nextTick(() => {
        // 将表格和工具栏进行关联
        const $table = this.$refs.projectMainTable
        const $toolbar = this.$refs.projectMainToolbar
        $table.connect($toolbar)
      })
    },
    activated() {
      this.refreshList()
    },
    methods: {
      // 获取数据列表
      refreshList() {
        this.loading = true
        projectMainService.list({
          'current': this.tablePage.currentPage,
          'size': this.tablePage.pageSize,
          'orders': this.tablePage.orders,
          ...this.searchForm
        }).then((data) => {
          this.dataList = data.records
          this.tablePage.total = data.total
          this.loading = false
        }).catch(err=>{
            this.loading = false
        })
      },
      // 当前页
      currentChangeHandle({ currentPage, pageSize }) {
        this.tablePage.currentPage = currentPage
        this.tablePage.pageSize = pageSize
        this.refreshList()
      },
      // 排序
      sortChangeHandle(obj) {
        this.tablePage.orders = [];
        if (obj.order != null) {
          this.tablePage.orders = [{ column: obj.column.sortBy || this.$utils.toLine(obj.property), asc: obj.order === "asc" }];
        } else {
          this.tablePage.orders = [{ column: "a.create_time", asc: false }];
        }
        this.refreshList();
      },
     
      // 查看
      view(id, basisType) {
        try {
          this.projectId = id;
          this.basisType = basisType;
          this.$router.push({
            path: "/projectDetails/projectDetails",
            query: {
              id: id,
              basisType: basisType
            }
          });
        } catch (error) {
          console.error('导航失败:', error);
          this.$message.error('页面跳转失败，请重试');
        }
      },

      // 下载模板
      downloadTpl() {
        this.loading = true
        projectMainService
          .exportTemplate()
          .then((data) => {
            // 将二进制流文件写入excel表，以下为重要步骤
            this.$utils.downloadExcel(data, "项目导入模板");
            this.loading = false
          })
          .catch(function (err) {
            this.loading = false
            if (err.response) {
              console.log(err.response);
            }
          });
      },
      // 自定义服务端导入
      importMethod({ file }) {
        // 处理表单
        const formBody = new FormData();
        formBody.append("file", file);
        this.loading = true
        projectMainService.importExcel(formBody).then((result) => {
          this.$message.success({
            dangerouslyUseHTMLString: true,
            message: result,
          });
          this.refreshList();
        });
      },
      // 自定义服务端导出
      exportMethod({ options }) {
        // 传给服务端的参数
        const params = {
          current: this.tablePage.currentPage,
          size: this.tablePage.pageSize,
          orders: this.tablePage.orders,
          ...this.searchForm,
          filename: options.filename,
          sheetName: options.sheetName,
          isHeader: options.isHeader,
          original: options.original,
          mode: options.mode,
          selectIds:
            options.mode === "selected"
              ? options.data.map((item) => item.id)
              : [],
          exportFields: options.columns.map(
            (column) => column.property && column.property.split(".")[0]
          ),
        };
        this.loading = true;
        return projectMainService
          .exportExcel(params)
          .then((data) => {
            // 将二进制流文件写入excel表，以下为重要步骤
            this.$utils.downloadExcel(data, options.filename);
            this.loading = false;
          })
          .catch(function (err) {
            if (err.response) {
              console.log(err.response);
            }
          });
      },
      resetSearch() {
        this.$refs.searchForm.resetFields()
        this.refreshList()
      },
      // 添加单元格点击处理方法
      handleCellClick({ row }) {
        // 如果有权限，则执行查看操作
        if (this.hasPermission('project:projectMain:view')) {
          this.view(row.id, row.basisType);
        }
      },
      bindExprot(id) {
      this.loading = true
      projectCostService
        .exportFund({ id: id })
        .then((data) => {
          // 将二进制流文件写入excel表，以下为重要步骤
          this.$utils.downloadExcel(data, "资金运营表");
          this.loading = false
        })
        .catch(function (err) {
          this.loading = false
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    }
  }
  </script>
  
  <style scoped>
  /* 可以添加鼠标悬停样式 */
  :deep(.vxe-table--body tr) {
    cursor: pointer;
  }
  </style>
  
  